<template>
    <el-card class="account-container">
        <div>
            <h1 v-if="hasNewOrder">您有新的订单需要处理</h1>
            <h1 v-else>目前没有待处理的订单哦</h1>
            <div>
                <audio ref="audioPlayer" src="../src/assets/music.mp3"></audio>
            </div>

            <el-table
                    :data="tableData"
                    style="width: 100%"
                    border
            >
                <el-table-column  width="100" label="订单状态">
                    <template #default="props">
                        <el-tag   effect="dark" type="danger">新订单</el-tag>

                    </template>
                </el-table-column>
                <el-table-column prop="orderTime" label="下单时间" />
                <el-table-column prop="consignee" label="订购人" width="180" />
                <el-table-column prop="amount" label="总价" />
                <el-table-column prop="notes" label="备注" />
                <el-table-column label="Operations">
                    <template #default="props">
                        <el-button

                                type="primary"
                                @click="openDetail(props.row.id)"
                        >订单详情</el-button>
                        <el-button

                                type="success"
                                @click="finishOrder(props.row.id)"
                        >安排派送</el-button>
                    </template>
                </el-table-column>

            </el-table>
            <el-row class="row-bg" justify="center">
                <el-pagination background layout="prev, pager, next" :total="10" />
            </el-row>

            <el-dialog destroy-on-close v-model="dialogVisible" title="菜单详情" @close="()=>{arrDish.value=[]}">
                <el-row>
                    <el-col
                            v-for="(item,index) in arrDish"
                            :key="index"
                            :span="8"
                            :offset="2"
                    >
                        <el-card :body-style="{ padding: '0px' }">
                            <img
                                    :src=item.image
                                    class="image"
                            />
                            <div style="padding: 14px">
                                <div>{{item.dishName}}</div>
                                <span>单价:{{item.price}} </span>

                                <div class="bottom">
                                    <span>数量:{{item.number}}</span>
                                    <el-button text class="button">商品详情</el-button>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </el-dialog>
        </div>
    </el-card>
</template>

<script setup>
    import {useStore} from 'vuex'
    import {useRouter} from 'vue-router'

    import {ref,onMounted,onBeforeUnmount} from "vue";
    const webSocketObject=ref()
    const messageList=ref([])
    const sendMessage=ref('')
    let audioPlayer = ref();
    const router=useRouter()
    import axios from 'axios';
    import {ElMessage} from "element-plus";
    const store=useStore()
    let tableData=ref();
    let input=ref();
    let hasNewOrder=ref(false);
    let dialogVisible=ref(false);
    let arrDish=ref([]);
    onMounted(()=>{
        webSocketInit()
    })
    onBeforeUnmount(()=>{
        webSocketObject.value.close();
    })
    const getMessage=()=>{

        axios.get('/api/merchant/getNewOrders',{
        })
            .then(response => {

                // 请求成功处理
                tableData.value=response.data.data;

                if(tableData.value!=null&&tableData.value.length!=0){
                    hasNewOrder.value=true
                }
                console.log("tableDate")
                console.log(tableData.value)
            })
            .catch(error => {
                // 请求失败处理
                console.error(error);
            });
    }
    const webSocketInit=()=>{
        const webSocketUrl = 'ws://localhost:8082/websocket'
        webSocketObject.value = new WebSocket(webSocketUrl);
        webSocketObject.value.onopen = webSocketOnOpen
        webSocketObject.value.onmessage = webSocketOnMessage
        webSocketObject.value.onerror = webSocketOnError
        webSocketObject.value.onclose = webSocketOnClose
    }
    const webSocketOnOpen=(e)=>{
        console.log('与服务端连接打开->',e)
    }
    const webSocketOnMessage=(e)=>{
        console.log('来自服务端的消息->',e)
        const receiveMessage = JSON.parse(e.data);
        /*console.log(receiveMessage)*/
        messageList.value.push(receiveMessage)
        /*audioPlayer.value.play();*/
       /* for(let i=0;i<messageList.value.length;i++){
            console.log(messageList.value[i]);
        }*/
        addNewOrders(receiveMessage)
        ElMessage.success("您有新的订单未处理，请注意查收")
        audioPlayer.value.play();
    }
    const webSocketOnError=(e)=>{
        console.log('与服务端连接异常->',e)
    }
    const webSocketOnClose=(e)=>{
        console.log('与服务端连接关闭->',e)
    }

    const addNewOrders=(order)=>{
        axios.get("api/merchant/getAnOrder",{
            params:{
                orderId:order
            }
        }).then(res=>{
            console.log(res.data)
            tableData.value.push(res.data.data)
        })
    }

    const openDetail=(orderId)=>{
        console.log("orderId")
        console.log(orderId)

        axios.get("api/merchant/getOrderDish",{
            params:{
                orderId:orderId
            }
        }).then(response=>{
            dialogVisible.value=true;
            console.log("查询结果")
            console.log(response)
            arrDish=response.data.data
        })
    }
    const  finishOrder=(orderId)=>{
        axios.get("api/merchant/finnishOrder",{
            params:{
                orderId:orderId
            }
        }).then(response=>{
            location.reload();
            ElMessage.success("订单已安排配送")
        })
    }
    getMessage();
</script>


<style scoped>
    .demo-image__error .image-slot {
        font-size: 30px;
    }
    .demo-image__error .image-slot .el-icon {
        font-size: 30px;
    }
    .demo-image__error .el-image {
        width: 100%;
        height: 200px;
    }
</style>



<style>
    .time {
        font-size: 12px;
        color: #999;
    }

    .bottom {
        margin-top: 13px;
        line-height: 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .button {
        padding: 0;
        min-height: auto;
    }

    .image {
        width: 100%;
        display: block;
    }

</style>